<template>
  <div class="ccc">
    <header>
      <div class="banxin top">
        <h2>TodoList</h2>
        <input
          type="text"
          placeholder="输入点什么"
          @keyup.enter="ipt"
          :value="inputValue"
          @input="changeInput($event.target.value)"
        />
      </div>
    </header>
    <div class="banxin">
      <Going />
      <Done />
    </div>
  </div>
</template>
 
<script>
import Going from "../components/Going.vue";
import Done from "../components/Done.vue";
import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {};
  },
  components: {
    Going,
    Done,
  },
  computed: {
    ...mapState({
      inputValue: (state) => state.todolist.inputValue,
      goingArr: (state) => state.todolist.goingArr,
    }),
  },
  methods: {
    ...mapMutations({
      changeInput: "todolist/changeInput",
      ipt: "todolist/ipt",
    }),
    ipt(e) {
      let obj = {
        id: new Date().getTime(),
        content: e.target.value,
        ifinput: false,
      };

      if (e.target.value.trim()) {
        this.goingArr.push(obj);
      } else {
        alert("你在赣神魔??");
      }
      e.target.value = "";
    },
  },
 
};
</script>
 
<style lang = "less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
body {
  background: #cccccc;
}
header {
  height: 50px;
  background: #333333;
}
.banxin {
  width: 600px;
  margin: 0 auto;
}
.top {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.top input {
  width: 300px;
  height: 30px;
  border-radius: 5px;
  text-indent: 2em;
  outline: none;
}
.top h2 {
  color: #fff;
}
</style>